<template>
  <view>
    <view class="ek-cates acea-row">
      <view class="item" :class="{active: cid == ''}" @click="onChangeCate('')">全部</view>
      <view v-for="(item, index) in cateList" :key="index" class="item"  :class="{active: cid == item.id}"   @click="onChangeCate(item.id)">{{ item.title }}</view>
    </view>
    <view class="ek-title">
      <view class="text">推荐活动专区</view>
      <view class="bg"></view>
    </view>
    <activity-item v-for="(item, index) in dataList" :key="index" :item="item" @click="onClick(item)"></activity-item>
  </view>
</template>

<script>
import ActivityItem from "./activity-item";
import {activityCategoryList, getActivityList} from "@/api/2_activity";
import dataList from "@/mixins/dataList";

export default {
  components: {ActivityItem},
  data() {
    return {
      cateList: [],
      cid: ''
    };
  },
  mixins: [dataList],
  onLoad() {
    activityCategoryList().then(res => {
      this.cateList = res.data
    })
    this.setDataListReq(getActivityList)
    this.getDataList()
  },
  methods: {
    onChangeCate(id) {
      this.cid = id
      this.setDataListPar({cid: id})
      this.resetDataList()
      this.getDataList()
    },
    onClick(item) {
      uni.navigateTo({
        url: `/pages/2_development/activity/details?id=${item.id}`
      })
    },

  }
}
</script>

<style lang="scss">
@import "../user/style.scss";
page {
  background: #f8f8f8;
}
</style>
